<template>
    <div>
        <div>
            <p style="display: inline-block; padding-left: 50px;">关键词：</p>
            <el-input v-model="words" style="width: 300px; display: inline-block;" placeholder="请输入关键词" clearable />
            <el-button style="margin-left: 15px;" type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
            <router-link :to="{name: 'AnnouncementRelease'}">
                <el-button style="float: right; margin-top: 8px; margin-right: 10px;" type="release" icon="el-icon-circle-plus-outline">发布公告</el-button>
            </router-link>
        </div>
        <div style="margin-top: 20px;">
            <el-table :data="releaseData" stripe style="width: 100%;" @selection-change="handleSelectionChange">
                <el-table-column type="selection" />
                <el-table-column align="center" prop="title" label="标题" width="350px" />
                <el-table-column align="center" prop="author" label="发布人" />
                <el-table-column align="center" prop="createTime" label="发布时间" />
                <el-table-column align="center" label="操作">
                    <template slot-scope="scope">
                        <el-button style="padding: 3px;" type="text" size="small" @click="openUpdate(scope.row)">更新</el-button>
                        <el-button style="padding: 3px;" type="primary" size="mini" @click="openDetails(scope.row)">查看详情</el-button>
                        <el-button style="padding: 3px;" type="danger" size="mini" @click="deleteRelease(scope.$index, scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-button size="small" style="margin-top: 8px; margin-left: 8px;" type="danger" :disabled="this.multipleSelection.length===0" @click="deleteMany">批量删除</el-button>
            <div style="display: flex; justify-content: flex-end;">
                <el-pagination background layout="sizes, prev, pager, next,jumper, ->, total" :total="total" @current-change="currentChange" @size-change="sizeChange" />
            </div>
        </div>
    </div>
</template>

<script>
import { Message } from 'element-ui'

export default {
    data() {
        return {
            words: '',
            results: [],
            releaseData: [],
            total: 0,
            currentPage: 1,
            pageSize: 10,
            multipleSelection: []
        }
    },
    created() {
        this.initreleaseData()
    },
    methods: {
        handleQuery() { // 关键词搜索
            var param = {currentPage: this.currentPage, pageSize: this.pageSize, words: this.words}
            this.getRequest('/notice/getAllList', param).then(resp => {
                if (resp.status === 200) {
                    this.releaseData = resp.data.data
                    this.total = resp.data.total
                }
            })
        },
        handleSelectionChange(val) { // 绑定多选框批量删除
            this.multipleSelection = val
        },
        openDetails(data) { // 点击跳转详情页面
            this.$router.push({path: '/announcement/details', query: data})
        },
        openUpdate(data) { // 点击跳转更新公告页面
            this.$router.push({path: '/announcement/update', query: data})
        },
        deleteMany() { // 批量删除
            this.$confirm('此操作将永久删除[' + this.multipleSelection.length + ']条公告,是否继续？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                let ids = '?'
                this.multipleSelection.forEach(item => {
                    ids += 'ids=' + item.id + '&'
                })
                this.deleteRequest('/notice/deleteBatch' + ids).then(resp => {
                    if (resp) {
                        this.initreleaseData()
                    }
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                })
            })
        },
        deleteRelease(index, data) { // 删除公告
            this.$confirm('此操作将永久删除公告[' + data.title + '],是否继续？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.deleteRequest('/notice/delete/', data.id).then(resp => {
                    if (resp.status === 200) {
                        // 按照后端返回的code细化
                        this.initreleaseData()
                        Message.success('删除成功')
                    } else {
                        // 这里只是接口请求报错或者不通的失败
                        Message.success('删除异常')
                    }
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                })
            })
        },
        sizeChange(pageSize) { // 分页页数
            this.pageSize = pageSize
            this.initreleaseData()
        },
        currentChange(currentPage) { // 分页当前页触发
            this.currentPage = currentPage
            this.initreleaseData()
        },
        initreleaseData() { // 分页获取公告信息,初始化
            var obj = {currentPage: this.currentPage, pageSize: this.pageSize}
            this.getRequest('/notice/getAllList/', obj).then(resp => {
                if (resp) {
                    this.releaseData = resp.data.data
                    this.total = resp.data.total
                }
            })
        }
    }
}
</script>

<style lang="scss" scoped>
.el-button--release {
    background-color: rgb(250, 136, 136);
    color: #f5f2f0;
}
</style>
